<!-- 调整展示客户 -->
<template>
  <div class="adjust_client">
    <dt-modal-edit ref='edit' :title='title' :label-width='130' okText='保存' cancelText='取消'
      :width='80' @ok='onOk' class="dt_modal_edit" @cancelData='cancelData'>
      <Row class="label_warp">
        <Col span="24" class="tips">
        <Icon type="md-alert" class="tips_icon" />
        以下为今日到访客户，您可勾选需要在案场日报中显示的客户，并将5个客户锁定至日报首页
        </Col>
      </Row>
      <div>已选中{{totalNum}}个,已锁定{{lockList.length}}个</div>
      <dt-grid ref="table" :onFetch='onFetch' height='500px' :select="select" />
      <!-- 客户详情 -->
      <Modal v-model="detailsFlag" title="客户详情" width="80%" :styles="{top:'5%'}"
        :footer-hide="true">
        <detail-page v-if="detailsFlag" :detailsParams="detailsParams"></detail-page>
      </Modal>
    </dt-modal-edit>
  </div>
</template>

<script>
  import columns from '../../opt/adjustClientColumns'
  import dailyApi from '@/biz/buildingHome/daily'
  import detailPage from '@/views/casemanagement/allCustomersManagement/details.vue'
  export default {
    components: { detailPage },
    data() {
      return {
        select: {
          one: (selection, row) => {
            if (selection.some(i => i.userCustomerId == row.userCustomerId)) {
              this.selectData.push(row)
            } else {
              let idx = this.selectData.findIndex(i => i.userCustomerId == row
                .userCustomerId)
              if (idx >= 0) {
                this.selectData.splice(idx, 1)
              }
            }
            this.selectedChange(this.selectData)
          },
          all: (selection) => {
            let tmp = []
            if (selection.length > 0) {
              selection.forEach(item => {
                if (!this.selectData.some(i => i.userCustomerId == item
                    .userCustomerId)) {
                  tmp.push(item)
                }
              })
              this.selectData = [...this.selectData, ...tmp]
            } else {
              this.list.forEach(item => {
                let idx = this.selectData.findIndex((i, idx) => i.userCustomerId == item
                  .userCustomerId)
                if (idx >= 0) {
                  this.selectData.splice(idx, 1)
                }
              })
            }
            this.selectedChange(this.selectData)
          }
        },
        selectData: [],
        list: [],
        title: '添加重点客户',
        lockList: [],
        detailsFlag: false,
        detailsParams: {},
        totalNum: 0,
        currentDate: ''
      }
    },
    methods: {
      show(date) {
        this.currentDate = date
        this.$refs.edit.show()
        this.$refs.table.init(this, new columns(this))
        this.$refs.table.fetch()
      },
      hide() {
        this.$refs.edit.hide()
      },
      cancelData() {
        this.selectData = []
      },
      onFetch(data) {
        let params = {
          ...data,
          buildingId: this.$dt.buildInfo().housesId,
          startDate: this.currentDate,
        }
        return dailyApi.checkInCustomerLists(params).then(res => {
          this.list = res || []
          this.findSelected(this.list)
          return res || []
        })
      },
      //默认勾选
      findSelected(list) {
        let tmp = []
        list.forEach(item => {
          if (this.selectData.some(i => i.userCustomerId == item.userCustomerId) || item
            .hasSelected) {
            tmp.push(item)
            this.selectData.push(item)
          }
        })
        this.$refs.table.selectRows(tmp)
      },
      //select发生变化
      selectedChange(e, row) {
        let hasIdArr = [];
        this.selectData.forEach(({ userCustomerId }) => hasIdArr.push(userCustomerId));
        this.list.forEach((item) => {
          if (hasIdArr.includes(item.userCustomerId)) {
            item.hasSelected = true
          } else {
            item.hasSelected = false
            item.hasLock = false
          }
        })
        this.totalNum = this.selectData.length
      },
      some(arr, key) {
        let some = [];
        arr.forEach(el => {
          if (!some.some(e => e[key] == el[key])) {
            some.push(el);
          }
        });
        return some
      },

      //首页锁定、取消锁定
      lockUser(data) {
        if (data.hasLock) {
          data.hasLock = false
          this.lockList.splice(this.lockList.findIndex(item => {
            item.userCustomerId == data.userCustomerId
          }), 1)
        } else {
          if (this.lockList.length == 5) return this.$Message.warning('您至多可选择5个客户锁定至日报首页')
          data.hasLock = true
          this.lockList.push(data)
        }
      },
      onOk(data) {
        let hasCheckCustomerIds = []
        let hasLockCustomerIds = []
        this.selectData.forEach(item => {
          hasCheckCustomerIds.push(item.userCustomerId)
          if (item.hasLock) hasLockCustomerIds.push(item.userCustomerId)
        })
        let params = {
          ...data,
          buildingId: this.$dt.buildInfo().housesId,
          createDate: this.currentDate,
          hasCheckCustomerIds: hasCheckCustomerIds.join(','),
          hasLockCustomerIds: hasLockCustomerIds.join(',')
        }
        console.log(params)
        dailyApi.updateDailyCustomer(params).then(res => {
          this.$Message.success('调整成功')
          this.$emit('success')
          this.hide()
        })
      },
      //查看客户
      checkUser(row) {
        if (row.customerName == '-') {
          return false
        }
        this.detailsFlag = true
        this.detailsParams = {
          customerId: row.customerId, // 手机号唯一编码
          userCustomerId: row.userCustomerId, // 客户信息唯一编码
          buildingId: this.$dt.buildInfo().housesId,
          userId: this.$dt.userInfo().userId,
          cityCode: this.$dt.buildInfo().cityId,
        }
      },
    }
  }
</script>
<style lang='scss' scoped>
  .adjust_client {
    .label_warp {
      text-align: center;
      margin-bottom: 15px;
      background-color: rgba(254, 252, 236, 1);
      width: auto;
      line-height: 32px;
      padding: 0 10px;

      .tips {
        line-height: 32px;
        font-size: 14px;

        .tips_icon {
          font-size: 20px;
          color: #0f42a7;
          vertical-align: sub;
        }
      }
    }

  }
</style>